<template>
    <!-- pages/myincome/storeincome/details/index.wxml -->
    <view>
        <view class="hairbox flexbox-sb">
            <view>
                <view class="text1">{{ userObj.name }}</view>
                <view class="text2">邀请时间：{{ userObj.inviteTime }}</view>
                <view class="text3">总收益：</view>
                <view class="text4">¥{{ userObj.income }}</view>
            </view>
            <view><image class="headimg" :src="userObj.headportrait"></image></view>
        </view>
        <view class="incomebox">
            <view class="flexbox-sb mt-40">
                <view class="centers incometext2" @tap="onShowpopup">
                    <view class="mr-10" @tap="onShowpopup">{{ nowtime }}</view>
                    <view class="sj"></view>
                </view>
                <view class="incometext1">总收益：¥{{ monthincome }}</view>
            </view>
            <view class="flexbox-sb box2" v-if="userlist.length > 0" v-for="(item, index) in userlist" :key="index">
                <view>
                    <view class="box2text1">{{ item.name }}</view>
                    <view class="box2text4 mt-10">间推消费收益</view>
                </view>

                <view>
                    <view class="box2text3">{{ item.income }}</view>
                    <view>
                        <text class="box2text2 mr-10">{{ item.time }}</text>
                        <!-- <text class="box2text2">12:00:03</text> -->
                    </view>
                </view>
            </view>
            <van-empty v-if="userlist.length == 0" description="暂无数据" />
        </view>
        <van-popup :show="show" round position="bottom" custom-style="height: 346px" @close="onClose" close-icon="cross" closeable>
            <view class="pbox mt-100">
                <van-datetime-picker type="year-month" :value="currentDate" :min-date="minDate" :max-date="maxDate" @input="onInputTime" :show-toolbar="false" />
            </view>
            <view class="btn" @tap="onType">确定</view>
        </van-popup>
    </view>
</template>

<script>
// pages/myincome/storeincome/details/index.js
const app = getApp(); // 引入app

const _request = require('../../../../utils/request.js'); // 引入require;

const { getTime } = require('../../../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            currentDate: new Date().getTime(),

            minDate: new Date(2019, 5, 1).getTime(),
            maxDate: new Date().getTime(),
            show: false,
            monthincome: 0,
            gettime: '',

            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }

                if (type === 'month') {
                    return `${value}月`;
                }

                return value;
            },

            nowtime: '',
            page: 1,
            userObj: null,
            userlist: [],
            id: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let time = getTime(new Date().getTime(), 4);
        this.setData({
            nowtime: time
        });
        let gettime = getTime(new Date().getTime(), 5);
        this.setData({
            gettime
        });
        this.setData({
            id: options.id
        }); // 获取用户信息

        _request
            .postObj('/recomUser/recommendSingleUser', {
                userId: uni.getStorageSync('userid'),
                inviteUserId: options.id,
                roletype: '1'
            })
            .then((res) => {
                if (res.data.data && res.data.data != null) {
                    res.data.data.inviteTime = getTime(res.data.data.inviteTime, 7);
                    this.setData({
                        userObj: res.data.data
                    });
                }
            })
            .catch((error) => {
                console.log(error);
            });

        this.postUserIncome(1, options.id, gettime, false);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.postUserIncome(1, this.id, this.gettime, true);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: this.page + 1
        });
        this.postUserIncome(this.page, this.id, this.gettime, true);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 关闭窗口
        onClose() {
            this.setData({
                show: false
            });
        },

        // 展示
        onShowpopup() {
            this.setData({
                show: true
            });
        },

        // 获取时间
        onInputTime(event) {
            let time = getTime(event.detail, 4);
            let gettime = getTime(event.detail, 5);
            this.setData({
                currentDate: event.detail,
                gettime: gettime,
                nowtime: time
            });
        },

        // 确定
        onType() {
            this.setData({
                show: false,
                userlist: []
            });
            this.postUserIncome(this.page, this.id, this.gettime, false);
        },

        // 获取用户收益列表
        postUserIncome(page, inviteUserId, month, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/recomUser/recommendUserIncomeByTime', {
                    userId: uni.getStorageSync('userid'),
                    inviteUserId,
                    roletype: '1',
                    inviteUserId,
                    month,
                    page,
                    size: 10
                })
                .then((res) => {
                    if (res.data.data.length > 0 && res.data.data != null) {
                        let list = res.data.data.map((item) => {
                            item.time = getTime(item.time, 1);
                            return item;
                        });
                        this.setData({
                            userlist: page > 1 ? [...this.userlist, ...list] : list,
                            monthincome: res.data.data[0].monthincome
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    console.log(error);

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                });
        }
    }
};
</script>
<style>
/* pages/myincome/storeincome/details/index.wxss */
/* 美发师信息 */
.hairbox {
    background: linear-gradient(360deg, #ff922a 0%, #ffac3c 100%);
    height: 304rpx;
    width: 710rpx;
    margin: 20rpx 20rpx 0rpx 20rpx;
    padding: 40rpx;
    box-sizing: border-box;
}

.headimg {
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
}

.text1 {
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ba5908;
    line-height: 56rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    width: 300rpx;
}

.text2 {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ba5908;
    line-height: 34rpx;
    margin-top: 10rpx;
}

.text3 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ba5908;
    line-height: 34rpx;
    margin-top: 40rpx;
}

.text4 {
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 34rpx;
    margin-top: 10rpx;
}

/* 收入记录 */
.incomebox {
    padding: 0 20rpx;
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx;
    box-sizing: border-box;
}

.sj {
    width: 0px;
    height: 0px;
    border-top: 12rpx solid #333333;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
}

.incometext1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.incometext2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.box2 {
    height: 144rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    width: 300rpx;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    width: 100%;
}

.box2text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 50rpx;
    text-align: right;
}

.box2text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

/* 弹窗 */
.pbox {
    height: 360rpx;
}

.btn {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: 50rpx;
    text-align: center;
}

.van-picker {
    height: 360rpx !important;
}
</style>
